<!--共享数据源-->

<template>
  <div class="share-datesource-comp w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div class="w-h-full" :style="{
      backgroundImage: 'url('+iconImg+')',
      backgroundRepeat: 'no-repeat',
      backgroundSize: '120px',
      backgroundPosition: 'center'
    }"/>
  </div>
</template>

<script>

import FuncCompMixin from '@/mixin/FuncCompMixin'
import PnDesigner from '@/utils/PnDesigner'

const _this = {
  name: 'ShareDatasourceComp', // 此名称必须填写，且必须与组件文件名相同
  mixins: [FuncCompMixin],
  attr: {
    version: '1.1',
    configDataTemp: Object.assign({

      staticDataTimeout: 200,
      dynamicDatasourceBeforeCallRunCode: ''

    }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
      ds_resultObjTemplate: [

      ],
      ds_resultObj: [

      ],
      ds_useFilter: true, // 是否使用过滤器，默认不使用
      ds_useTimer: true, // 是否开启定时器配置，默认不开启
    }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration())
  },
  data() {
    return {}
  },
  mounted() {
    this.init();

    this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
      this.init()
    })
  },
  beforeDestroy() {
    // 清除在共享数据源结果集中的记录
    let shareDatasourceResultSet = this.$store.getters['common/getShareDatasourceResultSet'];
    delete shareDatasourceResultSet[this.componentId];
    this.$store.commit('common/setShareDatasourceResultSet', shareDatasourceResultSet);
  },
  methods: {
    init () { // 组价初始化函数，函数名必须使用init，不可更改
      let sendShareDatasourceResultSet = () => {
        // let shareDatasourceResultSet = this.$store.getters['common/getShareDatasourceResultSet'];
        // shareDatasourceResultSet[this.component.id] = this.component.compConfigData.ds_resultObj;
        // this.$store.commit('common/setShareDatasourceResultSet', shareDatasourceResultSet);
        this.$EventBus.$emit('pn_shareDatasourceResultSet_' + this.component.id, this.runCustomFilter(this.component.compConfigData.ds_resultObj))
      }
      this.runDynamicDatasourceBeforeCallRunCode()
      this.initDatasource(() => {
        setTimeout(() => {
          sendShareDatasourceResultSet();
        }, this.component.compConfigData.staticDataTimeout)
        this.runCustomGlobalJsCode()
      }, (result) => {
        sendShareDatasourceResultSet();
        this.runCustomGlobalJsCode()
      });
    },
    commitShareDatasourceResultSet(ds_resultObj) {
      let shareDatasourceResultSet = this.$store.getters['common/getShareDatasourceResultSet'];
      shareDatasourceResultSet[this.component.id] = this.runCustomFilter(ds_resultObj);
      this.$store.commit('common/setShareDatasourceResultSet', shareDatasourceResultSet);
    },
    runDynamicDatasourceBeforeCallRunCode () {
      if (this.$store.state.release.pageMetadata
          && ['api','database'].indexOf(this.component.compConfigData.ds_type) > -1
          && this.component.compConfigData.dynamicDatasourceBeforeCallRunCode) {
        eval(this.component.compConfigData.dynamicDatasourceBeforeCallRunCode)
      }
    }
  },
  computed: {
    iconImg () {
      switch (this.component.compConfigData.ds_type) {
        case "static":
          return require('./images/share-json.png');
        case "api":
          return require('./images/share-api.png');
        case "database":
          return require('./images/share-database.png');
        case "websocket":
          return require('./images/share-websocket.png');
      }

    }
  },
  watch: {
    'component.compConfigData.ds_resultObj': {
      handler: function (val, oldVal) {
        if (!this.$store.state.release.pageMetadata) {
          if (JSON.stringify(val) != JSON.stringify(oldVal)) {
            this.commitShareDatasourceResultSet(val)
          }
        }
      },
      deep: true,
      immediate: true
    },
    'component.compConfigData.ds_filterCode': {
      handler: function (val, oldVal) {
        if (val != oldVal) {
          this.commitShareDatasourceResultSet(this.component.compConfigData.ds_resultObj)
        }
      }
    }
  }
};

export default _this
</script>

<style lang="less" scoped>
.share-datesource-comp {
  position: relative;
}
</style>

